import React from "react";
import ProductCard, { ProductCardSkeleton } from "@/src/components/ProductCard";
import { Suspense } from "react";
import prisma from "@/src/db/db";

const Products = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <Suspense
        fallback={
          <>
            {new Array(6).fill(null).map((_, i) => {
              return <ProductCardSkeleton key={i} />;
            })}
          </>
        }
      >
        <ProductsSuspense />
      </Suspense>
    </div>
  );
};

const getProducts = () => {
  return prisma.product.findMany({ where: { isAvailableForPurchase: true } });
};

async function ProductsSuspense() {
  const products = await getProducts();
  return (
    <>
      {products.map((product) => {
        return <ProductCard key={product.id} {...product} />;
      })}
    </>
  );
}

export default Products;
